<script setup>
import { ref } from 'vue';
import ChartContainer from '../ChartContainer.vue';

const option = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['用户量', '访问量', '转化率'],
    bottom: 0
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '12%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: [
    {
      type: 'value',
      name: '数量',
      min: 0,
      position: 'left'
    },
    {
      type: 'value',
      name: '百分比',
      min: 0,
      max: 100,
      position: 'right',
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ],
  series: [
    {
      name: '用户量',
      type: 'line',
      smooth: true,
      data: [120, 132, 101, 134, 90, 230, 210],
      lineStyle: {
        width: 3
      }
    },
    {
      name: '访问量',
      type: 'line',
      smooth: true,
      data: [220, 182, 191, 234, 290, 330, 310],
      lineStyle: {
        width: 3
      }
    },
    {
      name: '转化率',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      data: [12.5, 15.3, 18.2, 16.4, 22.8, 19.5, 21.2],
      lineStyle: {
        width: 3,
        type: 'dashed'
      }
    }
  ]
});
</script>

<template>
  <ChartContainer title="用户行为趋势折线图" :option="option" />
</template>